<template >
    <div class="app">
        <div>
            <video_Head :title="title"/>
        </div>
        <div >
           <Video_Head_Control_Real  @clientId="getClientId"/>
        </div>
        <div class="content">
            <dv-border-box-8 class="left" :color="['#18213e','#18213e']">
                <RealTimeMap class="gd_com_map" :clientId="clientId" v-if="fag"></RealTimeMap>
            </dv-border-box-8>
            <dv-border-box-8 class="right"  :color="['#18213e','#18213e']">
                <div class="realtime" >
                    <RtvsRetime  :clientId="clientId" :streamType="streamType"  :SplitNum="SplitNum" v-if="fag"></RtvsRetime>
                </div>
            </dv-border-box-8>
        </div>
    </div>
</template>
    
<script>
import RtvsRetime from "@/components/video/Rtvs_Retime"
import video_Head from "@/components/video/Video_head"
import RealTimeMap from "@/components/video/Real_Time_Map"
import Video_Head_Control_Real from "@/components/video/Video_Head_Control_Real"
export default {
    props: {

    },
    components: {  Video_Head_Control_Real,RtvsRetime ,RealTimeMap,video_Head},
    data: function () {
        return {
            title:"rtvs实时视频",
            fag:false,
            list:"",//车辆列表
            clientId: "",
            videoId:0,
            SplitNum:4,
            streamType:1
        }
    },
    created() {
        
    },
    methods: {
        getClientId(val) {
            this.fag=false;
            this.clientId=val[0];
            this.streamType=val[1];
            this.fag=true;
        }
    }
}

</script>
<style scoped>

.app{
 height: 100vh;
 background-image: url("../../assets/img/pageBg.png");
}
/* 控制按钮 */
.content {
    margin-top: 10px;
    clear: both;
    width: 100%;
    height: 82vh;
}
.gd_com_map {
    margin-top: 1.5%;
    margin-left: 1.5%;
    width: 97%;
    height: 97%;
}
.left {
    width: 45%;
    height: 82vh;
    background-color: #10191b;
    float: left;
    margin-left: 1%;
}

.right {
    float: right;
    width: 52%;
    height: 82vh;
    margin-right: 1%;
    background-color: #10191b;
    text-align: center;
}
.line{
    height: 30px;
   
}
.realtime {
    width: 97%;
    margin-top: 1%;
    margin-left: 1.5%;
    float: left;
    height:80vh;
    background-color: rgb(32, 32, 32);
    text-align: center;
}
</style>
    